<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
      ul{
      list-style-type:none;
      }
      a:link,a:visited{
      display:block;
      font-weight:bold;
      color:white;
      background-color:green;
      width:120px;
      text-align:center;
      padding:4px;
     }
     a:hover,a:active
    {
    background-color:orange;
    }
			
            .one{
            position:relative;
            display:block;
}

            .game{
            display:none;
            
            background-color:aquamarine;
            min-width:120px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
            padding: 10px 12px;
			z-index:1;
  }
  .one:hover .game{display:block;}
            
           .two{
            	position: relative;
           
            }
            .news{
            	display: none;
            	position:relative;
				
            	background:yellow;
            	min-width: 120px;
            	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				padding:10px 12px
				z-index:1000;
            }
            .two:hover .news{
            	display: block;
            }
	
	        .three{
			position:relative;
			}
			.picture{
			display:none;
			position:relative;
			
			background:pink;
			mid-width:120px;
			box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
			padding:10px 12px;
			z-index:1000;
			}
			.three:hover .picture{
			display:block;
			}
			 .four{
            	position: relative;
           
            }
            .shopping{
            	display: none;
            	position:relative;
				
            	background:yellow;
            	min-width: 120px;
            	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				padding:10px 12px
				z-index:1000;
            }
            .four:hover .shopping{
            	display: block;
            }
			 .five{
            	position: relative;
           
            }
            .vedio{
            	display: none;
            	position:relative;
				
            	background:yellow;
            	min-width: 120px;
            	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				padding:10px 12px
				z-index:1000;
            }
            .five:hover .vedio{
            	display: block;
            }
			.ulstyle li{
			width:120px;
			}
		</style>
	</head>
	<body>
		<ul class="ulstyle">
			<li class="one"><a href="#">游戏</a>
			<div class="game">
	        <p>LOL</p>
	        <p>绝地求生</p>
	        </div>
			</li>
			
			<li class="two"><a href="#">资讯</a>
			<div class="news">
	        <p>世界杯</p>
	        <p>财经新闻</p>
	        </div>
			</li>
			
			<li class="three"><a href="#">图片</a>
			<div class="picture">
	        <p>美食</p>
	        <p>旅游</p>
	        </div>
			</li>
			
			<li class="four"><a href="#">购物</a>
			<div class="shopping">
	        <p>电器商品</p>
	        <p>奢侈品</p>
	        </div>
			</li>
			
			<li class="five"><a href="#">视频</a>
			<div class="vedio">
	        <p>腾讯视频</p>
	        <p>优酷视频</p>
	        </div>
			</li>
		</ul>
	</body>
</html>
